import React, { Component } from "react";
import { View, Text, Image, StyleSheet, FlatList } from "react-native";
import CustomerHeader from "../../widget/customerHeader";

export default class SystemMessageList extends Component{
  constructor(props) {
    super(props);
    this.state={
      dataList:[{
        value:1,
        label:1
      },{
        value:2,
        label:2
      },{
        value:3,
        label:3
      },{
        value:4,
        label:4
      }]
    }
  }
  _renderItem=()=>{
    return (
      <View style={styles.cell}>
        <View style={styles.top}>
          <View style={styles.date}>
            <Text style={styles.dateTitle}>2019-06-27 23:18</Text>
          </View>
        </View>
        <View style={styles.info}>
          <Text style={styles.title}>系统通知</Text>
          <Text style={styles.content}>您反馈的问题我们已经解决，感谢您的宝贵建议</Text>
        </View>
      </View>
    )
  }
  render() {
    return (
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <CustomerHeader showLine={true} title={'系统通知'} leftOnPress={()=>{this.props.navigation.pop()}}></CustomerHeader>
        <FlatList data={this.state.dataList} renderItem={this._renderItem} keyExtractor={(item)=>item.value}></FlatList>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  date:{
    borderRadius: 2,
    height: 14,
    textAlign:'center',
    lineHeight:14,
    paddingHorizontal: 6,
    backgroundColor:'#00000020',
  },
  dateTitle:{
    color:'#fff',
    fontSize:10
  },
  top:{
    height: 45,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },
  info:{
    backgroundColor:'#FFFFFF',
    paddingVertical:21,
    paddingHorizontal:21,
    borderRadius:5,
    marginLeft:15,
    marginRight:15
  },
  title:{
    color:'#000000',
    fontSize: 14
  },
  content:{
    color:'#888888',
    fontSize:12,
    marginTop:10
  }
})
